<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="卡号">
        {{ cardCode }}
      </el-form-item>
      <el-form-item label="充值金额" prop="rechargeValue">
        <el-input v-model="form.rechargeValue" type="number" placeholder="充值金额" />
      </el-form-item>
      <el-form-item label="赠送金额" prop="giftValue">
        <el-input v-model="form.giftValue" type="number" placeholder="赠送金额" />
      </el-form-item>
      <el-form-item label="充值合计">
        {{ Number(form.rechargeValue) + Number(form.giftValue) }}
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { backOnlyRecharge } from '../../../../../api/ven/member'

const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  }
})
const emit = defineEmits(['submitForm'])
const cardCode = ref('')
const formBase = {
  rechargeValue: '',
  giftValue: '0',
  remark: ''
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    rechargeValue: [{ required: true, message: '必填', trigger: 'blur' }]
  }
})
const { open, title } = toRefs(props.props)
const { form, rules } = toRefs(data)

watch(open, (val) => {
  if (val) {
    form.value.memberId = props.props.data.id
    cardCode.value = props.props.data.cardCode
  } else {
    proxy.resetForm('dialogRef')
  }
})

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      backOnlyRecharge(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped lang="scss">
.dpflex{display: flex;
  span{margin: 0 15px;}
}
</style>
